<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>区块链管理平台</title>
		<!-- Custom fonts for this template -->
		<link href="https://s0.pstatp.com/cdn/expire-1-M/font-awesome/5.1.0/css/all.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
		 rel="stylesheet">
		<!-- Custom styles for this template -->
        <link href="../css/sb-admin-2.min.css" rel="stylesheet">
        <link rel="icon" href="../img/zfsoft.ico">
		<!-- Custom styles for this page -->
		<link href="../vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/element.css">
		<link rel="stylesheet" href="../css/net.css">
	</head>
	<body id="page-top">

		<!-- Page Wrapper -->
		<div id="wrapper">

			<!-- Sidebar -->
			<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

				<!-- Sidebar - Brand -->
				<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
					<div class="sidebar-brand-icon rotate-n-15">
						<i class="fas" >
							<img src="../img/zfsoft.ico" width="40" height="40"/>
						</i>
					</div>
					<div class="sidebar-brand-text mx-3">区块链管理平台</sup></div>
				</a>

				<!-- Divider -->
				<hr class="sidebar-divider my-0">

				<!-- Nav Item - Dashboard -->
				<li class="nav-item">
					<a class="nav-link" href="introduce.html">
						<i class="fas fa-fw fa-folder"></i>
						<span>使用向导</span></a>
				</li>

				<li class="nav-item">
					<a class="nav-link" href="index.html">
						<i class="fas fa-fw fa-tachometer-alt"></i>
						<span>系统概览</span></a>
				</li>

				<!-- Divider -->
				<hr class="sidebar-divider">

				<!-- Heading -->
				<div class="sidebar-heading">
					管理配置
				</div>

				<!-- Nav Item - Pages Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="host.html">
						<i class="fas fa-fw fa-cog"></i>
						<span>主机管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="organizations.html">
						<i class="fas fa-fw fa-wrench"></i>
						<span>组织管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="channel.html" aria-controls="collapseUtilities">
						<i class="fas fa-fw fa-chart-area"></i>
						<span>通道管理</span>
					</a>
                </li>
                
                <li class="nav-item active">
                    <a class="nav-link collapsed" href="net.html">
                      <i class="fas fa-fw fa-table"></i>
                      <span>网络管理</span>
                    </a>
                  </li>            

			</ul>
			<!-- End of Sidebar -->

			<!-- Content Wrapper -->
			<div id="content-wrapper" class="d-flex flex-column">

				<!-- Main Content -->
				<div id="content">

					<!-- Topbar -->
					<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

						<!-- Sidebar Toggle (Topbar) -->
						<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
							<i class="fa fa-bars"></i>
						</button>

						<ul class="navbar-nav ml-auto">

							<div class="topbar-divider d-none d-sm-block"></div>

							<!-- Nav Item - User Information -->
							<li class="nav-item dropdown no-arrow">
								<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
								 aria-haspopup="true" aria-expanded="false">
									<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
									<img class="img-profile rounded-circle" src="../img/admin.jpg">
								</a>
								<!-- Dropdown - User Information -->
								<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
									<a class="dropdown-item" href="../login.html">
										<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
										退出
									</a>
								</div>
							</li>
						</ul>
					</nav>
					<!-- End of Topbar -->

					<!-- Begin Page Content -->
					<div class="container-fluid">
						<h1 class="h3 mb-2 text-gray-800">启动网络</h1>
						<h2 class="h5 mb-2 text-gray-800">在主机和组织都准备好之后，到网络管理中创建区块链网络，网络在创建之后会自动启动，所有属于本网络组织的节点都会启动，至此，已完成了区块链网络的构建。</h2>
						<div class="net-wrap clearfix">
							<div>
								<el-button type="primary" @click="generate()">生成配置文件</el-button>
								<div class="net-content">
									<div style="white-space: pre-wrap;">{{ text }}</div>
								</div>
							</div>
<!--							<div>-->
<!--								<el-button type="primary" @click="deploy()">部署区块链网络</el-button>-->
<!--								<div class="net-content">-->
<!--									<div1 style="white-space: pre-wrap;">{{ test }}</div1>-->
<!--								</div>-->
<!--							</div>-->
						</div>


					</div>
					<!-- /.container-fluid -->

				</div>
				<!-- End of Main Content -->


				<!-- Footer -->
				<footer class="sticky-footer bg-white">
					<div class="container my-auto">
						<div class="copyright text-center my-auto">
							<span>Copyright &copy; 卓繁信息 2020</span>
						</div>
					</div>
				</footer>
				<!-- End of Footer -->

			</div>
			<!-- End of Content Wrapper -->

		</div>
		<!-- End of Page Wrapper -->

		<!-- Scroll to Top Button-->
		<a class="scroll-to-top rounded" href="#page-top">
			<i class="fas fa-angle-up"></i>
		</a>

		<!-- Bootstrap core JavaScript-->
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>

		<!-- Core plugin JavaScript-->
		<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>

		<!-- Custom scripts for all pages-->
		<script src="../js/sb-admin-2.min.js"></script>

		<!-- Page level plugins -->
		<script src="../vendor/datatables/jquery.dataTables.min.js"></script>
		<script src="../vendor/datatables/dataTables.bootstrap4.min.js"></script>

		<!-- Page level custom scripts -->
		<script src="../js/demo/datatables-demo.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
		<script src="../js/element.js"></script>
		<script>
			var vue = new Vue({
				el: '#wrapper',
				data: {
					text:"生成配置文件...",
					// test:'部署过程显示...',
					// path:"ws://192.168.0.30:8031/deploy/websocket/123",
					// socket:"",
					// scrollTop:null
				},
				// mounted () {
				// 	this.ready();
				// 	// 初始化
				// 	this.init();
				// },
				methods: {
				// 	ready(){
				// 		var cip = returnCitySN["cip"];
				// 		console.log(cip);//cip就是本机ip地址
				// 	},
				// 	init: function () {
				// 		if(typeof(WebSocket) === "undefined"){
				// 			alert("您的浏览器不支持socket")
				// 		}else{
				// 			this.socket = new WebSocket(this.path)
				// 			this.socket.onopen = this.open
				// 			this.socket.onerror = this.error
				// 			this.socket.onmessage = this.getMessage
				// 		}
				// 	},
				// 	open: function () {
				// 		console.log("socket连接成功")
				// 	},
				// 	error: function () {
				// 		console.log("连接错误")
				// 	},
				// 	getMessage: function (msg) {
				// 		console.log(msg.data)
				// 		this.test+=msg.data;
				// 	},
				// 	send: function (params) {
				// 		this.socket.send(params)
				// 	},
				// 	close: function () {
				// 		console.log("socket已经关闭")
				// 	},
					generate() {
						let _this = this;
						axios("/deploy/generate", _this.post).then(function (res) {
							_this.text = res.data;
						}).catch(function (error) {
							alert(error)
						})
						this.$nextTick(()=>{
							$("div").scrollTop(650)
						})

					},
					// deploy() {
					// 	$("net-content").scrollTop(650)
					// 	// let _this = this;
					// 	axios("/deploy/deployFabric", this.post).then(function (res) {
					// 		alert(res.data)
					// 	}).catch(function (error) {
					// 		alert(error)
					// 	})
					// },
				},
				// destroyed () {
				// 	// 销毁监听
				// 	this.socket.onclose = this.close
				// }
			})
		</script>
	</body>

</html>
